<template>
	<div class="app-container home">
		<div class="box-card-list flex flex-wrap justify-sb items-start">
			<div class="box-card-item padding-15 flex-0-1-79-72">
				<div class="mb-25 flex justify-start items-fend">
					<div class="card-title">代办事项</div>
				</div>
				<div class="flex-gap-25 flex-wrap flex height-max-217">
					<div @click="onclickJump(item)" v-for="(item,index) in toDoList" :key="index" class="justify-sb flex padding-10">
						<el-image class="width-54 height-54" :src="item.iconImage" fit="contain" ></el-image>
						<div class="ml-14">
							<div class="fs-30 fw-b fc-333 mb-3 l-height-30 height-30">{{item.number}}</div>
							<div class="fs-12 text-center l-height-12 height-12" style="color: #606266;">{{item.title}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box-card-item padding-15 flex-0-1-18-87">
				<div class="mb-25 flex justify-sb items-fend">
					<div class="card-title">快捷入口</div>
					<div @click="onclickShortMenus()" class="justify-start items-center flex">
						<el-icon size="12" color="#909399"><Setting /></el-icon>
						<div class="set-lable">设置</div>
					</div>
				</div>
				<div class="flex-gap-14-4 flex-wrap flex justify-sb">
					<div @click="onclickJump(item)" v-for="(item,index) in shortcutMenus" :key="index" class="justify-center flex-column flex">
						<el-image class="icon-image" :src="item.iconImage" fit="fill" ></el-image>
						<div class="mt-10 fs-12 text-center" style="color: #606266;">{{item.title}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="box-card-list flex flex-wrap justify-sb items-center mt-20">
			<div v-for="(item,index) in coreDataStatistics" class="box-card-item flex-0-1-18-87 padding-15">
				<div class="flex justify-sb items-fend">
					<div class="card-title">{{item.title}}</div>
					<el-tag>{{item.tagTtile}}</el-tag>
				</div>
				<div>
					<div class="fs-34 fc-333 fw-b">{{item.dataNumber}}</div>
					<div></div>
				</div>
				<div class="divider-8-a"></div>
				<div class="card-footer flex justify-sb items-center">
					<div>{{item.monthDesc}}</div>
					<div>{{item.monthNumber}}</div>
				</div>
			</div>
		</div>
		<div class="box-card-list flex flex-wrap justify-start items-center mt-20">
			<div class="box-card-item padding-15" style="width: 100%;">
				<div class="mb-25 flex justify-start items-fend">
					<div class="card-title">机房资产</div>
				</div>
				<div class="flex-gap-25 flex-wrap flex">
					<div class="justify-fstart flex flex-0-1-23-8 padding-10">
						<div ref="assetsChartRef" style="width: 100%; height: 400px;"></div>
					</div>
					<div class="justify-fstart flex flex-0-1-23-8 padding-10">
						<div ref="diskChartRef" style="width: 100%; height: 400px;"></div>
					</div>
					<div class="justify-fstart flex flex-0-1-23-8 padding-10">
						<div ref="trafficChartRef" style="width: 100%; height: 400px;"></div>
					</div>					
					<div class="justify-fstart flex flex-0-1-23-8 padding-10">
						<div ref="pieChartRef" style="width: 100%; height: 400px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="Index">
	import { ref,onMounted } from 'vue';
	import * as echarts from 'echarts';
	import workOrderIcon from '@/assets/icons/svg/pending-work-order.svg';
	import emergencyDispatchIcon from '@/assets/icons/svg/pending-emergency-dispatch.svg';
	import emergencyPlanIcon from '@/assets/icons/svg/pending-emergency-plan.svg';
	import networkProbeIcon from '@/assets/icons/svg/pending-network-probe.svg';
	import equipmentWarningIcon from '@/assets/icons/svg/pending-equipment-warning.svg';
	import environmentalWarningIcon from '@/assets/icons/svg/pending-environmental-warning.svg';
	import equipmentFailureIcon from '@/assets/icons/svg/pending-equipment-failure.svg';
	import serverWarningIcon from '@/assets/icons/svg/pending-server-warning.svg';
	import serverFailureIcon from '@/assets/icons/svg/pending-server-failure.svg';
	import dataWarningIcon from '@/assets/icons/svg/pending-data-warning.svg';
	import storageManagementIcon from '@/assets/icons/svg/pending-storage-management.svg';
	import planManagementIcon from '@/assets/icons/svg/pending-plan-management.svg';
	import environmentalConfigIcon from '@/assets/icons/svg/pending-environmental-config.svg';
	import warningConfigIcon from '@/assets/icons/svg/pending-warning-config.svg';
	import failureConfigIcon from '@/assets/icons/svg/pending-failure-cinfig.svg';
	const router = useRouter()
	const shortcutMenus = ref([	//	快捷菜单
		{
			title:'数据预警',
			iconImage:dataWarningIcon,
			url:'storage/dataalarms',
		},{
			title:'存储管理',
			iconImage:storageManagementIcon,
			url:'storage/device',
		},{
			title:'预案管理',
			iconImage:planManagementIcon,
			url:'urgent/dispatch',
		},{
			title:'环境预警',
			iconImage:environmentalConfigIcon,
			url:'environment/envir',
		},{
			title:'预警配置',
			iconImage:warningConfigIcon,
			url:'environment/envir_config',
		},{
			title:'故障配置',
			iconImage:failureConfigIcon,
			url:'ults/faults_config',
		},
	])
	const pieData = ref([
		{ value: generateRandomData(1, 1, 99)[0], name: '机房' },
		{ value: generateRandomData(1, 1, 99)[0], name: '机柜' },
		{ value: generateRandomData(1, 1, 99)[0], name: '服务器' },
		{ value: generateRandomData(1, 1, 99)[0], name: '虚拟机' },
		{ value: generateRandomData(1, 1, 99)[0], name: '设备' },
	])
	const toDoList = ref([	//	代办事项
		{
			title:'待处理工单',
			number:generateRandomData(1, 1, 25)[0],
			iconImage:workOrderIcon,
			url:'orders/mywork'
		},{
			title:'待处理应急调度',
			number:generateRandomData(1, 1, 25)[0],
			iconImage:emergencyDispatchIcon,
			url:'urgent/dispatch'
		},{
			title:'待处理应急预案',
			number:generateRandomData(1, 1, 25)[0],
			iconImage:emergencyPlanIcon,
			url:'urgent/plan'
		},{
			title:'待处理网络探针',
			number:'18',
			iconImage:networkProbeIcon,
			url:'internet/probe'
		},{
			title:'待处理设备预警',
			number:generateRandomData(1, 1, 25)[0],
			iconImage:equipmentWarningIcon,
			url:'internet/probe'
		},{
			title:'待处理环境预警',
			number:generateRandomData(1, 1, 25)[0],
			iconImage:environmentalWarningIcon,
			url:'environment/envir'
		},{
			title:'待处理设备故障',
			number:generateRandomData(1, 1, 25)[0],
			iconImage:equipmentFailureIcon,
			url:'faults/alarm'
		},{
			title:'待处理服务器预警',
			number:generateRandomData(1, 1, 25)[0],
			iconImage:serverWarningIcon,
			url:'hardware/service_monitor'
		},{
			title:'待处理服务器故障',
			number:generateRandomData(1, 1, 25)[0],
			iconImage:serverFailureIcon
		}
	])
	const noticeBoards = ref([	//	通知
	])
	const coreDataStatistics = ref([	//	核心数据统计
		{
			title:'新增机房',
			tagTtile:'本周',
			dataNumber:generateRandomData(1, 1, 10)[0],
			monthDesc:'本月扩展机房数量',
			monthNumber:generateRandomData(1, 10, 50)[0]+'间'
		},{
			title:'新增机柜',
			tagTtile:'本周',
			dataNumber:generateRandomData(1, 1, 10)[0],
			monthDesc:'本月扩展机柜数量',
			monthNumber:generateRandomData(1, 10, 50)[0]+'个'
		},{
			title:'新增服务器',
			tagTtile:'本周',
			dataNumber:generateRandomData(1, 1, 10)[0],
			monthDesc:'本月扩展服务器量',
			monthNumber:generateRandomData(1, 10, 50)[0]+'台'
		},{
			title:'新增虚拟机',
			tagTtile:'本周',
			dataNumber:generateRandomData(1, 1, 10)[0],
			monthDesc:'本月扩展虚拟机数量',
			monthNumber:generateRandomData(1, 10, 50)[0]+'台'
		},{
			title:'新增设备',
			tagTtile:'本周',
			dataNumber:generateRandomData(1, 1, 10)[0],
			monthDesc:'本月扩展设备数量',
			monthNumber:generateRandomData(1, 10, 50)[0]+'台'
		}
	])
	const version = ref('3.9.0')
	const chartData = {
	  categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
	  prePurchaseQueue: generateRandomData(12, 5, 70),
	  latestTransactionPrice: generateRandomData(12, 5, 70),
	};
	const assetsChartRef = ref(null);
	const trafficChartRef = ref(null);
	const diskChartRef = ref(null);
	const pieChartRef = ref(null)
	const assetsOptions = {
		  title: {
			text: '机房',
			left: 'left',
		  },
		  tooltip: {
			trigger: 'axis',
			axisPointer: {
			  type: 'cross',
			  label: {
				backgroundColor: '#6a7985',
			  },
			},
		  },
		  legend: {
			data: ['启用','未启用'],
		  },
		  toolbox: {
			feature: {
			  saveAsImage: {},
			},
		  },
		  xAxis: {
			type: 'category',
			boundaryGap: false,
			data: chartData.categories,
		  },
		  yAxis: {
			type: 'value',
		  },
		  series: [
			{
			  name: '启用',
			  smooth:true,
			  type: 'line',
			  stack: '总量',
			  areaStyle: {
				// 面积图填充色为渐变色
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				  { offset: 0, color: 'rgba(0, 170, 0, 0.8)' }, // 淡粉色渐变
				  { offset: 1, color: 'rgba(0, 170, 0, 0.2)' },
				]),
			  },
			  itemStyle: {
				color: 'rgb(0, 170, 0)', // 折线颜色
				lineStyle: {
				  width: 2,
				},
			  },
			  data: chartData.prePurchaseQueue,
			},{
			  name: '未启用',
			  smooth:true,
			  type: 'line',
			  stack: '总量',
			  areaStyle: {
				// 面积图填充色为渐变色
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				  { offset: 0, color: 'rgba(255, 0, 4, 0.8)' }, // 淡粉色渐变
				  { offset: 1, color: 'rgba(255, 0, 4, 0.1)' },
				]),
			  },
			  itemStyle: {
				color: 'rgb(255, 0, 4)', // 折线颜色
				lineStyle: {
				  width: 2,
				},
			  },
			  data: chartData.prePurchaseQueue,
			}
		  ],
	};
	const trafficOptions = {
		  title: {
			text: '流量',
			left: 'left',
		  },
		  tooltip: {
			trigger: 'axis',
			axisPointer: {
			  type: 'cross',
			  label: {
				backgroundColor: '#6a7985',
			  },
			},
		  },
		  legend: {
			data: ['上行', '下行'],
		  },
		  toolbox: {
			feature: {
			  saveAsImage: {},
			},
		  },
		  xAxis: {
			type: 'category',
			boundaryGap: false,
			data: chartData.categories,
		  },
		  yAxis: {
			type: 'value',
		  },
		  series: [
			{
			  name: '上行',
			  smooth:true,
			  type: 'line',
			  stack: '总量',
			  areaStyle: {
				// 面积图填充色为渐变色
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				  { offset: 0, color: 'rgba(255, 102, 153, 0.8)' }, // 淡粉色渐变
				  { offset: 1, color: 'rgba(255, 102, 153, 0.2)' },
				]),
			  },
			  itemStyle: {
				color: 'rgb(255, 102, 153)', // 折线颜色
				lineStyle: {
				  width: 2,
				},
			  },
			  data: chartData.prePurchaseQueue,
			},
			{
			  name: '下行',
			  smooth:true,
			  type: 'line',
			  stack: '总量',
			  areaStyle: {
				// 面积图填充色为渐变色
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				  { offset: 0, color: 'rgba(150, 190, 255, 0.8)' }, // 淡蓝色渐变
				  { offset: 1, color: 'rgba(150, 190, 255, 0.2)' },
				]),
			  },
			  itemStyle: {
				color: 'rgb(150, 190, 255)', // 折线颜色
				lineStyle: {
				  width: 2,
				},
			  },
			  data: chartData.latestTransactionPrice,
			},
		  ],
	};
	const deskOptions = {
		  title: {
			text: '磁盘',
			left: 'left',
		  },
		  tooltip: {
			trigger: 'axis',
			axisPointer: {
			  type: 'cross',
			  label: {
				backgroundColor: '#6a7985',
			  },
			},
		  },
		  legend: {
			data: ['写入', '读取'],
		  },
		  toolbox: {
			feature: {
			  saveAsImage: {},
			},
		  },
		  xAxis: {
			type: 'category',
			boundaryGap: false,
			data: chartData.categories,
		  },
		  yAxis: {
			type: 'value',
		  },
		  series: [
			{
			  name: '写入',
			  smooth:true,
			  type: 'line',
			  stack: '总量',
			  areaStyle: {
				// 面积图填充色为渐变色
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				  { offset: 0, color: 'rgba(255, 102, 153, 0.8)' }, // 淡粉色渐变
				  { offset: 1, color: 'rgba(255, 102, 153, 0.2)' },
				]),
			  },
			  itemStyle: {
				color: 'rgb(255, 102, 153)', // 折线颜色
				lineStyle: {
				  width: 2,
				},
			  },
			  data: chartData.prePurchaseQueue,
			},
			{
			  name: '读取',
			  smooth:true,
			  type: 'line',
			  stack: '总量',
			  areaStyle: {
				// 面积图填充色为渐变色
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				  { offset: 0, color: 'rgba(150, 190, 255, 0.8)' }, // 淡蓝色渐变
				  { offset: 1, color: 'rgba(150, 190, 255, 0.2)' },
				]),
			  },
			  itemStyle: {
				color: 'rgb(150, 190, 255)', // 折线颜色
				lineStyle: {
				  width: 2,
				},
			  },
			  data: chartData.latestTransactionPrice,
			},
		  ],
	};
	const roomtOptions = { // 机房资产-饼形图
		tooltip: {
		  trigger: 'item',
		  formatter: '{a} <br/>{b}: {c} ({d}%)',
		},
		legend: {
			orient: 'horizontal',
			left: 'right',
			data: pieData.value.map(item => item.name),
		},
		series: [
		  {
		    name: '机房资产',
		    type: 'pie',
		    radius: '50%',
		    center: ['50%', '60%'],
		    data: pieData.value,
		    emphasis: {
		      itemStyle: {
		        shadowBlur: 10,
		        shadowOffsetX: 0,
		        shadowColor: 'rgba(0, 0, 0, 0.5)',
		      },
		    },
		    label: {
		      // 显示数据标签
		      show: true,
		      position: 'outside',
		      formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}: }{c|{c}}  {per|{d}%}  ',
		      rich: {
		        a: {
		          color: '#999',
		          lineHeight: 22,
		          align: 'center',
		        },
		        hr: {
		          borderColor: '#aaa',
		          width: '100%',
		          height: 0,
		        },
		        b: {
		          fontSize: 14,
		          lineHeight: 33,
		        },
		        c: {
		          fontSize: 14,
		          textAlign: 'left',
		          padding: [2, 4],
		        },
		        per: {
		          color: '#fff',
		          backgroundColor: '#555',
		          padding: [2, 4],
		          borderRadius: 2,
		        },
		      },
		    },
		    labelLine: {
		      show: true,
		      length: 10,
		      length2: 20,
		    },
		  },
		],
	}
	const onclickJump = (item)=>{	//	跳转指定方法
		router.push({
		  path: item.url,
		})
	}
	const onclickShortMenus = ()=>{	//	快捷键设置
		
	}
	// 在组件挂载后初始化 ECharts
	onMounted(() => {
		if (assetsChartRef.value) {
			const assetsChart = echarts.init(assetsChartRef.value);
			assetsChart.setOption(assetsOptions);
			  
			// 监听窗口大小变化，自适应图表
			window.addEventListener('resize', () => {
				traffiCchart.resize();
			});
		}
		if (trafficChartRef.value) {
			const trafficChart = echarts.init(trafficChartRef.value);
			trafficChart.setOption(trafficOptions);
	  
			// 监听窗口大小变化，自适应图表
			window.addEventListener('resize', () => {
				traffiCchart.resize();
			});
	    }
		if (diskChartRef.value) {
			const diskChart = echarts.init(diskChartRef.value);
			diskChart.setOption(deskOptions);
			window.addEventListener('resize', () => {
				diskChart.resize();
			});
		}
		if (pieChartRef.value){
			const pieChart = echarts.init(pieChartRef.value);
			pieChart.setOption(roomtOptions);
			window.addEventListener('resize', () => {
			  pieChart.resize();
			});
		}
	});
	function goTarget(url) {
		window.open(url, '__blank')
	}
	function generateRandomData (length, min, max){
	  return Array.from({ length }, () => Math.floor(Math.random() * (max - min) + min));
	}
</script>

<style scoped lang="scss">	
	.box-card-list{
		width: 100%;
		gap: 18px;
	}
	.box-card-item{
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
		border-radius: 6px;
	}
	.box-card-item .card-title{
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}
	.box-card-item .set-lable{
		color: #909399;
		margin-left: 3px;
		height: 14px;
		line-height: 14px;
	}
	.box-card-item .icon-image{
		width: 50px;
		height: 50px;
		border-radius: 6px;
		margin: 0px auto;
	}
	.home {
		blockquote {
			padding: 10px 20px;
			margin: 0 0 20px;
			font-size: 17.5px;
			border-left: 5px solid #eee;
		}

		hr {
			margin-top: 20px;
			margin-bottom: 20px;
			border: 0;
			border-top: 1px solid #eee;
		}

		.col-item {
			margin-bottom: 20px;
		}

		ul {
			padding: 0;
			margin: 0;
		}

		font-family: "open sans",
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;
		font-size: 13px;
		color: #676a6c;
		overflow-x: hidden;

		ul {
			list-style-type: none;
		}

		h4 {
			margin-top: 0px;
		}

		h2 {
			margin-top: 10px;
			font-size: 26px;
			font-weight: 100;
		}

		p {
			margin-top: 10px;

			b {
				font-weight: 700;
			}
		}

		.update-log {
			ol {
				display: block;
				list-style-type: decimal;
				margin-block-start: 1em;
				margin-block-end: 1em;
				margin-inline-start: 0;
				margin-inline-end: 0;
				padding-inline-start: 40px;
			}
		}
	}
</style>
